<template>
  <div class="theme-switcher dark:bg-gray-800 rounded-lg">
    <!-- 主题色选择器 -->
    <div v-if="availableThemes && availableThemes.length > 0" class="flex gap-2">
      <button
        v-for="theme in availableThemes"
        :key="theme.value"
        @click="setTheme(theme.value)"
        class="w-6 h-6 rounded-full"
        :class="{
          'ring-2 ring-blue-500': currentTheme === theme.value,
          'bg-blue-500': theme.value === 'blue',
          'bg-emerald-500': theme.value === 'emerald',
          'bg-rose-500': theme.value === 'rose',
          'bg-amber-500': theme.value === 'amber'
        }"
      >
        <svg 
          v-if="currentTheme === theme.value"
          class="w-4 h-4 m-auto text-white"
          viewBox="0 0 20 20" 
          fill="currentColor"
        >
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useThemeStore } from '../stores/theme'

const storeLoaded = ref(false)
const themeStore = useThemeStore()

// 确保 store 已初始化
onMounted(() => {
  storeLoaded.value = true
})

// 安全解构
const { availableThemes, currentTheme } = storeToRefs(themeStore)
const { setTheme } = themeStore
</script>